<template>
	<view>
		<!-- 我的照片 -->
		<view class="p-30">
			<view class="flex myImage">
				<view class="myImageItem" style="margin-bottom: 25rpx;" v-for="(item,i) in 6" :key="i">
					<image class="myImageItemA" v-if="myImages[i]" @click="lookImg(i)" :src="$util.img(myImages[i])"  mode="aspectFill"></image>
					<image class="myImageItemA" src="../../static/images/addImages.png" @click="addImage" v-else mode="widthFix"></image>
					<view class="myImageItemText" v-if="myImages[i]&&i==0">封面</view>
					<image class="iconImage" @click="closeImg(album_images[i].id)" v-if="myImages[i]" src="../../static/icon/close.png" mode=""></image>
				</view>
			</view>
		</view>
		<uv-toast ref="toast"></uv-toast>
	</view>
</template>

<script>
	import base from "@/common/js/config.js"
	export default {
		data() {
			return {
				userInfo:{},
				album_images:[],
				myImages: [],
				album_imagesS:[]
			};
		},
		mixins: ['base'],
		onLoad() {
			this.getUserInfo()
		},
		methods:{
			// 添加图片
			editalbum(img) {
				this.$api.sendRequest({
					url:'/api/user/editalbum',
					data:{
						useralbum:this.myImages.toString()
					},success:res=>{
						this.getUserInfo()
					}
				})
			},
			// 添加图片
			addImage() {
				uni.chooseImage({
					count: 6 - this.myImages.length,
					success: res => {
						res.tempFilePaths.forEach((item, i) => {
							wx.showLoading({
								title: '上传中(' + (i + 1) + '/' +
									res.tempFilePaths.length + ')'
							})
							uni.uploadFile({
								url: `${base.baseUrl}api/Common/upload`,
								filePath: item,
								name: 'file',
								success: resA => {
									let a = JSON.parse(resA.data)
									console.log(a,'++--++--++--');
									this.myImages.push(a.data.url)
									this.editalbum(a.data.url)
								},
								fail: errA => {
									console.log(errA);
								}
							});
							if (i + 1 == res.tempFilePaths.length) {
								wx.hideLoading()
							}
						})
			
					},
					fail(err) {
						console.log(err);
					}
				})
			
			},
			closeImg(id) {
				
				this.$api.sendRequest({
					url:'/api/User/deleteuseralbum',
					data:{
						id:id
					},success:res=>{
						if(res.code==1) {
							this.$refs.toast.show({
								type: 'default',
								message: '删除成功',
								duration:1000
							})
							this.getUserInfo()
						}else {
							this.$refs.toast.show({
								type: 'default',
								message: res.msg,
								duration:1000
							})
						}
					}
				})
			},
			// 查看图片
			lookImg(i) {
				let that = this
				// 网络
				uni.previewImage({
					current:i,
					urls: that.myImages,
					longPressActions: {
						itemList: ['发送给朋友', '保存图片', '收藏'],
						success: function(data) {
							
						},
						fail: function(err) {
							console.log(err.errMsg);
						}
					}
				})
			},
			// 获取用户信息
			getUserInfo() {
				this.$api.sendRequest({
					url: '/api/user/userInfo',
					success: res => {
						this.userInfo = res.data
						this.album_images = res.data.album_images
						this.myImages = []
						if(res.data.album_images) {
							res.data.album_images.forEach((item,i)=>{
								this.myImages.push(item.image)
							})
						}
					}
				})
			},
		}
	}
</script>

<style lang="scss">
.myImageItem {
		width: 216rpx;
		height: 240rpx;
		border-radius: 16rpx;
		position: relative;
		.myImageItemA {
			width: 216rpx;
			height: 240rpx;
			border-radius: 16rpx;
		}

		.iconImage {
			position: absolute;
			width: 40rpx;
			height: 40rpx;
			bottom: 20rpx;
			right: 20rpx;
		}

		.myImageItemText {
			position: absolute;
			left: 20rpx;
			top: 20rpx;
			width: 66rpx;
			height: 36rpx;
			color: #fff;
			background-color: rgba(0, 0, 0, 0.3);
			font-size: 24rpx;
			line-height: 36rpx;
			text-align: center;
			border-radius: 8rpx;
		}
	}

	.myImage {
		flex-wrap: wrap;
		justify-content: space-between;
	}
</style>
